<table id="listing_tbl" cellspacing="0" cellpadding="0" class="settings_tbl" style="width:400px">
	<tr>
		<th>Settings</th>
		<th width="30%">Options</th>
	</tr>
	<tr>
		<td>Account</td>
		<td><?= anchor("users/edit_info/{$this->session->userdata('user_id')}", '<img src="html/img/app_48.png" height="20px" width="20px" title="edit" />', 'id="user_info_button"') ?></td>
	</tr>
	<tr>
		<td>Database</td>
		<td><?= anchor('settings/download_db/','<img src="html/img/floppy_disk_48.png" height="20px" width="20px" title="download database" />') ?> <?= anchor('settings/email_db/','<img src="html/img/mail.png" height="25px" width="25px" title="email database" />','id="email_db"') ?></td>
	</tr>
</table>
<div id="listing_bottom" style="width:400px">
	<img src="html/img/ajax-loader.gif" class="loader" style="display:none"/>
</div>

<div id="user_info_modal"></div>

<script>
$(function(){
	$('#user_info_button').click(function(e){
		e.preventDefault();
		$('#user_info_modal').load($(this).attr('href'), function() {
			$(this).dialog('open');
		});
	});

	$("#user_info_modal").dialog({
		autoOpen: false,
		modal: true,
		title: 'Edit Info',
		minWidth: 350,
		resizable:false,
		buttons: {
			Update: function() {
				$("#user_info_modal form").submit();
			},
			Cancel: function(){
				$(this).dialog("close");
			}
		}
	});

	$("#email_db").click(function(e) {
		e.preventDefault();
		$('.loader').show();
		$.get($(this).attr('href'), function() {
			$('.loader').hide();
		});
	});
});
</script>